<template>
  <div class="main">
    <Field type="text" label="抬头" placeholder="发票抬头" @change="(v) => this.address.taitou = v"/>
    <Field
      type="text"
      label="税号"
      placeholder="请输入公司统一社会信用代码"
      @change="(v) => this.address.shuihao = v"
    />
    <Field type="text" label="联系人" placeholder="您的姓名" @change="(v) => this.address.name = v"/>
    <Field
      type="text"
      label="手机号"
      placeholder="配送人员联系您的电话"
      @change="(v) => this.address.mobile = v"
    />
    <Field type="custom" label="寄送地址" placeholder="请选择省/市/区">
      <span @click="selectArea" class="area">{{address.area ? address.area : '请选择省/市/区'}}</span>
    </Field>
    <Field
      type="text"
      label="门牌号"
      placeholder="详细地址，例：1号楼一单元101室"
      @change="(v) => this.address.street = v"
    />
    <van-popup position="bottom" v-model="showArea">
      <van-picker
        ref="areaPick"
        :columns="columns"
        show-toolbar
        title="选择城市"
        @cancel="onCancel"
        @confirm="onConfirm"
        @change="onChange"
        value-key="name"
      />
    </van-popup>
    <ActionButton class="blue-btn" text="确认" @click="handleSubmit"/>
  </div>
</template>

<script>
import api from "../../api";
import common from "../../api/common";
import ActionButton from "@/components/common/ActionButton";
import Field from "@/components/buyrecord/Field";
const IsPhone = /^1[345789]\d{9}$/;
function AddressItem(code, name) {
  this.code = code;
  this.name = name;
}

AddressItem.prototype.toString = function() {
  return this.name;
};
export default {
  title: "开票信息填写",
  components: {
    Field,
    ActionButton
  },
  data() {
    return {
      uid: this.$store.state.uid,
      order_sn: common.getParam("orderSn"),
      showArea: false,
      areaList: {
        province_list: {},
        city_list: {},
        county_list: {}
      },
      columns: [
        {
          values: [],
          className: "column1"
        },
        {
          values: [],
          className: "column2"
        },
        {
          values: [],
          className: "column3"
        }
      ],
      address: {
        ids: [],
        order_sn: "",
        taitou: "",
        shuihao: "",
        name: "",
        mobile: "",
        area: "",
        street: ""
      }
    };
  },
  methods: {
    getAllAddress() {
      // 获取所有省
      api.address.getAllAddress(
        "",
        0,
        res => {
          this.columns[0].values = [];
          for (var code in res.province) {
            var name = res.province[code];
            this.columns[0].values.push(new AddressItem(code, name));
          }
          api.address.getAllAddress(
            this.columns[0].values[0].code,
            1,
            res => {
              this.columns[1].values = [];
              for (var code in res.city) {
                var name = res.city[code];
                this.columns[1].values.push(new AddressItem(code, name));
              }
              api.address.getAllAddress(
                this.columns[1].values[0].code,
                2,
                res => {
                  this.columns[2].values = [];
                  for (var code in res.dist) {
                    var name = res.dist[code];
                    this.columns[2].values.push(new AddressItem(code, name));
                  }
                },
                error => {
                  this.$toast(error.msg);
                }
              );
            },
            error => {
              this.$toast(error.msg);
            }
          );
        },
        error => {
          this.$toast(error.msg);
        }
      );
    },
    selectArea() {
      this.showArea = true;
    },
    onCancel() {
      this.showArea = false;
    },
    onConfirm() {
      var address = this.$refs.areaPick.getValues();
      var ids = [];
      var area = "";
      for (var c in address) {
        if (address[c] && typeof address[c] == "object") {
          area += address[c].name + "-";
          ids.push(address[c].code);
        }
      }
      area = area.substring(0, area.length - 1);
      this.address.area = area;
      this.address.ids = ids;
      this.showArea = false;
    },
    onChange(picker, values, index) {
      console.log("onChange: " + index);
      if (index == 0) {
        // 选择第一列
        var provincesId = this.$refs.areaPick.getColumnValue(0).code;
        api.address.getAllAddress(
          provincesId,
          1,
          res => {
            console.log(res);
            var city = [];
            for (var code in res.city) {
              var name = res.city[code];
              city.push(new AddressItem(code, name));
            }
            picker.setColumnValues(1, city);
            var cityId = city[0].code;
            api.address.getAllAddress(
              cityId,
              2,
              res => {
                var area = [];
                for (var code in res.dist) {
                  var name = res.dist[code];
                  area.push(new AddressItem(code, name));
                }

                picker.setColumnValues(2, area);
              },
              error => {
                this.$toast(error.msg);
              }
            );
          },
          error => {
            this.$toast(error.msg);
          }
        );
      } else if (index == 1) {
        // 选择第二列
        var cityId = this.$refs.areaPick.getColumnValue(1).code;
        api.address.getAllAddress(
          cityId,
          2,
          res => {
            var area = [];
            for (var code in res.dist) {
              var name = res.dist[code];
              area.push(new AddressItem(code, name));
            }

            picker.setColumnValues(2, area);
          },
          error => {
            this.$toast(error.msg);
          }
        );
      }
    },
    handleSubmit() {
      if (this.address.taitou == "") {
        this.$toast(`请输入发票抬头`);
        return;
      }
      if (this.address.shuihao == "") {
        this.$toast(`请输入公司统一社会信用代码`);
        return;
      }
      if (this.address.name == "") {
        this.$toast(`请输入您的姓名`);
        return;
      }
      if (this.address.mobile == "") {
        this.$toast(`请输入您的手机号码`);
        return;
      }
      if (!IsPhone.test(this.address.mobile)) {
        this.$toast(`请输入正确的手机号码`);
        return;
      }
      if (this.address.area == "") {
        this.$toast(`请选择地址`);
        return;
      }
      if (this.address.street == "") {
        this.$toast(`请输入详细地址`);
        return;
      }

      let uid = this.uid;
      let order_sn = this.order_sn;
      let taitou = this.address.taitou;
      let shuihao = this.address.shuihao;
      let name = this.address.name;
      let mobile = this.address.mobile;
      let province_id = this.address.ids[0];
      let city_id = this.address.ids[1];
      let dist_id = this.address.ids[2];
      let street = this.address.street;
      let that = this;
      api.usercenter.buyRecordApply(
        uid,
        order_sn,
        taitou,
        shuihao,
        name,
        mobile,
        province_id,
        city_id,
        dist_id,
        street,
        res => {
          this.$toast.success({
            message: `提交成功`,
            position: "middle",
            onClose() {
              that.$routerPush(that, `/pages/buyrecord/Index`);
            }
          });
        }
      );
    }
  },
  mounted() {
    this.getAllAddress();
  }
};
</script>

<style lang="less" scoped>
.main {
  padding: 0 4vw;
}
.area {
  display: inline-block;
  font-size: 4vw;
  width: 70vw;
  color: #999;
}
</style>